<template>
  <div style="{ 'height': (tableHeight) + 'px' }">
    <el-table :data="tableData" :height="tableHeight" v-loading="tableLoading">
      <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" align="center"
                       :prop="column.prop"
      >
        <template v-if="$scopedSlots[column.slot]" v-slot="scope">
          <slot :name="column.slot" :row="scope.row"></slot>
        </template>
        <template v-else v-slot="scope">
          {{ get(scope.row, column.prop, 'N/A') }}
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="tableTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="handSubList"
    />
  </div>
</template>
<script lang="js">
import get from 'lodash/get'

export default {
  name: 'sonPage',
  props: {
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    tableHeight: {
      type: [Number, String],
      required: false,
      default: 300
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableTotal: {
      type: Number,
      required: true,
      default: 0
    }

  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    get,
    handSubList() {
      this.$emit('pagination', this.queryParams)
    }
  }

}
</script>
<style scoped></style>
